<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            display: grid;
            margin-bottom: 100px;

            border: 1px solid black;
        }
        .item {
            border-radius: 2px;
            display: inline-block;
        }

        .item:nth-child(1) { background-color: red; }
        .item:nth-child(2) { background-color: orange; }
        .item:nth-child(3) { background-color: yellow; }
        .item:nth-child(4) { background-color: green; }
        .item:nth-child(5) { background-color: skyblue; }
        .item:nth-child(6) { background-color: blue; }
        .item:nth-child(7) { background-color: purple; }
        .item:nth-child(8) { background-color: black; }
        .item:nth-child(9) { background-color: gray; }

        .container {
            grid-template-columns: repeat(auto-fill, 100px);
        }
        .container2 {
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
        }

        .container3 {
            /*
            grid-template-columns: 33.33% 33.33% 33.33%;
            grid-template-rows: 33.33% 33.33% 33.33%;
            */
            grid-template-columns: repeat(3, 33.33%);
            grid-template-rows: repeat(3, 33.33%);
        }

        .container4 {
            grid-template-columns: repeat(2, 100px 20px 80px);
        }

        /* 每列宽度100px，然后自动填充，直到容器不能放置更多的列 */
        .container5 {
            grid-template-columns: repeat(auto-fill, 100px);
        }
        .container6 {
            grid-template-columns: 1fr 1fr;
        }

        .container7 {
            grid-template-columns: 150px 1fr 2fr;
        }

        .container8 {
            grid-template-columns: 1fr 1fr minmax(100px, 1fr);
        }

        .container9 {
            grid-template-columns: 100px auto 100px;
        }

        .container10 {
            grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
            grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
        }

        .container11 {
            grid-template-columns: repeat(12, 1fr);
        }

        .container12 {
            grid-gap: 20px 20px;
        }

        .container13 {
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
        }

        .container14 {
            grid-template-areas: 'a a a'
                                'b b b'
                                'c c c';
        }

        .container15 {
            grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";
        }

        .container16 {
            grid-template-areas: '. . .'
                     '. . .'
                     '. . .';
        }

        .container17 {
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px;
            grid-auto-rows: 25px; /* 从第三行开始隐式创建的行，行高为25px */
        }

        .container18 {
            width: 200px;
            grid-template-columns: 50px 1fr 50px;
            grid-template-rows: repeat(2, 50px);
            grid-auto-flow: column;

            .item1,
            .item3 {
                grid-row: 1 / 3;
            }
        }
    </style>
</head>
<body>
    <h1>基本用法</h1>
    <div class="box container">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>
    <div class="box container2">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>（1）repeat()</h1>
    <div class="box container3">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>
    <div class="box container4">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>（2）auto-fill 关键字</h1>
    <div class="box container5">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>（3）fr 关键字</h1>
    <div class="box container6">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>
    <div class="box container7">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>（4）minmax()</h1>
    <div class="box container8">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>（5）auto 关键字</h1>
    <p>auto关键字表示由浏览器自己决定长度。</p>
    <div class="box container9">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>（6）网格线的名称</h1>
    <p>grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。</p>
    <p>网格布局允许同一根线有多个名字，比如[fifth-line row-5]。</p>
    <div class="box container10">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>（7）列数大于内容的个数</h1>
    <div class="box container11">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>
        grid-row-gap 属性，
        grid-column-gap 属性，
        grid-gap 属性
    </h1>
    <p>
        grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。
        grid-gap: grid-row-gap grid-column-gap
    </p>
    <div class="box container12">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>container13</h1>
    <div class="box container13">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>container14</h1>
    <div class="box container14">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>container15</h1>
    <div class="box container15">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>container16</h1>
    <div class="box container16">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <h1>container17</h1>
    <div class="box container17">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
        <div class="item">10</div><div class="item">11</div><div class="item">12</div>
    </div>

    <div class="box container18">
        <div class="item item1">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item item3">4</div>
    </div>

    <div class="box container19">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <div class="box container20">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <div class="box container21">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <div class="box container22">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <div class="box container23">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

    <div class="box container24">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
    </div>

</body>
</html>